<!--
* @name: 侧边菜单栏
* @author: DuanYiPeng
* @date: 2020-07-27
-->
<template>
    <div class='menu'>
        <transition
            enter-active-class="animate__animated animate__fadeIn animate__faster"
            leave-active-class="animate__animated animate__fadeOut animate__faster">
            <div class="mask" @click="changeShow" v-if="menuShow" ></div>
        </transition>
        <transition
            enter-active-class="animate__animated animate__fadeInLeftBig animate__faster"
            leave-active-class="animate__animated animate__fadeOutLeftBig animate__faster">
            <div class="main" v-if="menuShow" >
                <div class="title">
                    <span
                        class="bread"
                        :class="{'a-c':activeId == item.id}"
                        v-for="(item,index) in activeData"
                        @click="afterChildren(index,item)"
                        :key="index">
                        <span v-if="index !== 0"> > </span>
                        {{item.name}}
                    </span>
                </div>
                <div ref="rowList">
                    <div
                        flex="cross:center"
                        class="row"
                        :class="{'a-c':activeId == item.id}"
                        v-for="(item,index) in menuData[activeIndex]"
                        @click="nextChildren(item)"
                        :key="index">
                        {{item.name}}
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
    import { articleTree } from '@/api/apis/auth.js'
    import Velocity from "velocity-animate"
    import  "velocity-animate/velocity.ui.js"
    export default {
        name: "sideMenu",
        components: {},
        data() {
            return {
                // 菜单状态
                menuShow:false,
                // 菜单数据
                menuData:[],
                // 选中菜单
                activeData:[],
                // 选中菜单索引
                activeIndex:0,
                activeId:0
            }
        },
        created() {
        },
        mounted() {
            this.articleTree()
        },
        computed: {},
        methods: {
            // 停止列表动画
            stopAnimt(){
                let rows = this.$refs.rowList.children
                Velocity(rows,'stop');
            },
            // 列表动画
            listAnimt(){
                this.$nextTick(()=>{
                    let rows = this.$refs.rowList.children
                    Velocity(rows,'transition.slideLeftBigIn', { stagger: 200 ,display: "flex"},{  });
                })
            },
            // 向父组件传递参数
            fatherParme(){
                this.$nextTick(()=>{
                    this.$emit('onMenuChange',this.activeId)
                })
            },
            // 更改面包屑
            afterChildren(index,item){
                this.stopAnimt()
                this.activeId = item.id;
                this.activeIndex = index;
                this.activeData = this.activeData.splice(0,index+1);
                this.listAnimt()
                this.fatherParme()
            },
            // 更改菜单
            nextChildren(item){
                this.stopAnimt()
                let children = item?item.children:[];
                if(children && children != 0){
                    this.activeIndex = this.activeIndex + 1;
                    this.menuData[this.activeIndex] = children
                    this.setActive(item)
                    this.listAnimt()
                }
                this.activeId = item.id;
                this.fatherParme()
            },
            // 获取菜单
            articleTree(){
                articleTree().then(res=>{
                    let { code,data } = res;
                    if(code === 20000 ){
                        this.menuData.push(data);
                        this.setActive()
                    }
                })
            },
            // 设置面包屑数组
            setActive(item){
                let active = {
                    name:item?item.name:'全部',
                    id:item?item.id:0,
                }
                this.activeData.push(active)
            },
            // 更改侧边栏状态
            changeShow(){
                this.menuShow = !this.menuShow;
            }
        },
    }
</script>
<style scoped lang='scss'>
.menu{
    .mask{
        @include boxBase();
        background-color: rgba(0,0,0,.6);
        position: fixed;
        left: 0;
        top: 0;
        z-index: 2000;
    }
    .a-c{
        color:$base-color !important;
        font-weight: 800;
    }
    @media screen and (min-width:960px) and (max-width:1920px){
        .main{
            @include boxBase(360px);
            background-color: #fff;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 2001;
            overflow: hidden;
            .title{
                @include boxBase(100%,58px);
                border-bottom: 1px solid #e3e3e3;
                padding: 0 22px;
                cursor: pointer;
                .bread{
                    width: 80px;
                    height: 100%;
                    line-height: 58px;
                    @include fontBase(16px,#333);
                    font-weight: 600;
                    @include ellipsis()
                }
            }
            .row{
                @include fontBase(16px,#333);
                min-height:58px;
                border-bottom: 1px solid #e3e3e3;
                cursor: pointer;
                padding: 0 22px;
                transition: color,font-size .2s ease-in;
                &:hover{
                    color:$base-color;
                }
            }

        }

    }
    @media screen and (max-width:959px){
        .main{
            @include boxBase(62%);
            background-color: #fff;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 2001;
            padding: 0 .32rem;
            overflow: hidden;
            .title{
                @include boxBase(100%,1.28rem);
                border-bottom: 1px solid #e3e3e3;
                .bread{
                    width: 2.13rem;
                    height: 100%;
                    line-height: 1.28rem;
                    @include fontBase(.32rem,#333);
                    @include ellipsis()
                }
            }
            .row{
                @include fontBase(.37rem,#333);
                min-height: 1.28rem;
                border-bottom: 1px solid #e3e3e3;
            }

        }

    }
}
</style>
